import React, { useState } from 'react';
import { Space, Table, Tag, Pagination, Button, Modal, Popconfirm } from 'antd';
import type { TableProps } from 'antd';
import { useAppDispatch, useAppSelector } from '@/store/reactreduxts';
import type { noticeTS } from '@/store/crmsTS';
import dayjs from 'dayjs';
import Myfrom from './Myfrom';
import { async_delnotice } from '@/store/noticeSlice';


const Notice: React.FC = () => {


  //获取数据
  let obj = useAppSelector(state => state.crms1)
  let dispatch = useAppDispatch()

  /* 表头 */
  const columns: TableProps<noticeTS>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id'
    },
    {
      title: '公告标题',
      dataIndex: 'notice',
    },
    {
      title: '公告类型',
      dataIndex: 'typeId',
      render: (typeId, record) => {
        return <Tag color={record.typeId == 1 ? 'green' : 'yellow'}>
          {typeId == 1 ? '公告' : '通知'}
        </Tag>
      }
    },
    {
      title: '状态',
      dataIndex: 'collect',
      render: (collect) => {
        return <Tag color={collect ? 'blue' : 'red'}>{collect ? '正常' : '异常'}</Tag>
      }
    },
    {
      title: '创建者',
      dataIndex: 'title',
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      render: (time) => {
        return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            //显示
            showModal()
            //标题
            setTitle('编辑')
            //添加={...}
            setItemobj(record)
          }}>修改</a>
          <Popconfirm
            title="提示"
            description="确定删除吗?"
            onConfirm={() => {
              //执行删除的方法
              dispatch(async_delnotice(record.id))
            }}
            okText="是"
            cancelText="否"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  let [current, setCurrent] = useState<number>(1)//定义页数
  let [pageSize, setPageSize] = useState<number>(3)//定义每页的条数
  let [total, setTotal] = useState(obj.noticelist.length)//定义一共多少数据

  //控制对话框的显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);
  //显示
  const showModal = () => {
    setIsModalOpen(true);
  };
  //隐藏
  const handleOk = () => {
    setIsModalOpen(false);
  };
  //X号隐藏
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //控制标题的状态
  let [title, setTitle] = useState('')
  let [itemobj, setItemobj] = useState({})


  return <div>

    {/* 对话框 */}
    <>
      <Button type="primary" onClick={() => {
        //显示
        showModal()
        //标题
        setTitle('添加')
        //添加={}
        setItemobj({})
      }}>
        添加
      </Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Myfrom title={title} handleOk={handleOk} itemobj={itemobj}></Myfrom>
      </Modal>
    </>

    {/* 表格和分页*/}
    <Table<noticeTS> columns={columns} dataSource={obj.noticelist}
      rowKey={'id'}
      pagination={{
        current,//当前页数
        pageSize,//每页多少条数据
        total,//一共多少数据
        pageSizeOptions: [3, 4, 5],//指定显示多少条
        showQuickJumper: true,//是否跳转
        showSizeChanger: true,//是否展示切换器
        onChange: (page, pageSize) => {
          setCurrent(page)
          setPageSize(pageSize)
        }
      }}
    />
  </div>
}

export default Notice;
